﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
	var result=document.getElementById("result");
	var file=document.getElementById("file");
	if (typeof FileReader == 'undefined' ){
	   result.innerHTML = "<h1>当前浏览器不支持FileReader对象</h1>";
	   file.setAttribute('disabled', 'disabled' );
	}
}
function readFile(){
    var file = document.getElementById("file").files[0];
    var reader = new FileReader();
    reader.onload = function(e){
        result.innerHTML = '<img src="'+this.result+'" alt=""/>'
        console.log("load");
    }
    reader.onprogress = function(e){
         console.log("progress");
    }
    reader.onabort = function(e){
         console.log("abort");
    }
    reader.onerror = function(e){
         console.log("error");
    }
    reader.onloadstart = function(e){
         console.log("loadstart");
    }
    reader.onloadend = function(e){
         console.log("loadend");
    }
    reader.readAsDataURL(file);
}
</script>
</head>
<body>
<input type="file" id="file" />
<input type="button" value="显示图像" onclick="readFile()" />
<div name="result" id="result"></div>
</body>
</html> 
